<template>
  <view>
    <view class="address-wrap">
      <!-- 收货地址信息 -->
      <view class="address" v-if="address">
        <view class="address-row1">
          {{ detailAddress }}
        </view>
        <view class="address-row2">
          <text>{{ address.userName }}</text>
          <text>{{ address.telNumber }}</text>
        </view>
      </view>
      <!-- 收货地址按钮 -->

      <button v-else class="address-btn" @click="onChooseAddress" type="warn" plain>获取用户的收货地址</button>
    </view>
    <!-- 列表 -->
    <view>
      <view>已选商品</view>
      <view class="list">
        <view class="cart-item" v-for="(item, index) in checkedCartList" :key="item.goods_id">
          <!-- 商品图片 -->
          <view class="cart-img">
            <image mode="widthFix" :src="item.goods_small_logo"></image>
          </view>
          <!-- 商品详情 -->
          <view class="cart-detail">
            <view class="cart-goods-name u-line-2">{{ item.goods_name }}</view>
            <view class="cart-goods-info">
              <view class="goods-price">￥{{ item.goods_price }}</view>
              <view class="goods-num-tool">
                <!-- 切换其他的实现方式！！！  -->
                <view class="num-value">X {{ item.nums }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 购物车栏 -->
    <view class="cart-tool">
      <!-- 合计 -->
      <view class="all-price">
        合计:
        <text>￥{{ totalPrice }}</text>
      </view>
      <!-- 结算 -->
      <view class="go-pay" @click="onPay">去支付({{ totalNum }})</view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  import getToken from '@/utils/wxToken'
  export default {
    data() {
      return {
        // 收货地址
        address: null
      }
    },

    methods: {
      async onChooseAddress() {
        const [err, result] = await uni.chooseAddress({})
        this.address = result
      },
      // 支付按钮
      async onPay() {
        // 获取token
        const token = await getToken()
        // 构造 生成订单需要的参数
        const orderParams = {
          // 是	string	订单总价格
          order_price: this.totalPrice,
          // 是	string	收货地址
          consignee_addr: this.detailAddress,
          // 是	Array	订单数组
          goods: this.checkedCartList.map(goods => ({
            goods_id: goods.goods_id,
            goods_number: goods.nums,
            goods_price: goods.goods_price
          }))
        }

        //  发起请求 完成订单的创建 成功的话 会返回 order_number
        const orderResult = await uni.$u.http.post('/my/orders/create', orderParams, {
          header: { Authorization: token }
        })

        // 获取到了订单编号
        const { order_number } = orderResult.message

        // 获取支付参数
        const payResult = await uni.$u.http.post(
          '/my/orders/req_unifiedorder',
          { order_number },
          {
            header: { Authorization: token }
          }
        )
        // 获取支付参数
        const { pay } = payResult.message
        // 调起微信支付
        uni.requestPayment(pay)
      }
    },
    computed: {
      ...mapGetters(['checkedCartList', 'totalPrice', 'totalNum']),
      // 详细的收货地址信息
      detailAddress() {
        if (!this.address) return ''
        const { provinceName, cityName, countyName, detailInfo } = this.address
        return provinceName + cityName + countyName + detailInfo
      }
    }
  }
</script>

<style lang="scss">
.address-wrap {
  .address {
    padding: 20rpx;
    .address-row1 {
      font-weight: 700;
    }
    .address-row2 {
      font-size: 26rpx;
      color: #666;
      text {
        margin-right: 30rpx;
      }
    }
  }

  .address-btn {
    margin-top: 20rpx;
    width: 60%;
  }
}
.cart-item {
  display: flex;
  .cart-chk {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 80%;
    }
  }

  .cart-detail {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .cart-goods-name {
      font-size: 26rpx;
      color: #666;
    }

    .cart-goods-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .goods-price {
        font-size: 26rpx;
        color: #eb4450;
      }

      .goods-num-tool {
        display: flex;

        .num-change {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          border: 1rpx solid #ccc;
          text-align: center;
          line-height: 34rpx;
          font-size: 26rpx;
          color: #666;
        }

        .num-value {
          height: 40rpx;
          margin: 0 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          color: #666;
        }
      }
    }
  }
}
.cart-tool {
  border-top: 1rpx solid #ccc;
  padding: 0 20rpx;
  display: flex;
  height: 83rpx;
  align-items: center;
  color: #666;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;

  .all-checkbox {
    width: 144rpx;
    font-size: 26rpx;
  }

  .all-price {
    flex: 1;
    font-size: 26rpx;
    text {
      color: #eb4450;
    }
  }

  .go-pay {
    padding: 0 20rpx;
    height: 52rpx;
    background-color: #ea4350;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26rpx;
    font-size: 22rpx;
  }
}
</style>